<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!--表格样式-->
    <style>
        .el-table .row_1 {
            background: #e3f6d5;
        }
        .el-table .row_2{
            background: #cfddf3;
        }
        .el-table .row_3{
            background: #e5c0c0;
        }
    </style>
</head>

<body>

    <div id="app">
        <h1 align="center" >欢迎来到商品管理系统</h1>
        <!--查询-->
        <el-input placeholder="请输入商品编号" v-model="searchById"  style="width: 30%"></el-input>
        <el-button  type="primary"  icon="el-icon-search" @click="getById">编号查询</el-button>
        <el-input placeholder="请输入商品名称" v-model="searchByName" style="width: 30%"></el-input>
        <el-button  type="primary"  icon="el-icon-search" @click="getByName">名称查询</el-button>
        <!--所有商品按钮-->
        <el-button type="primary" @click="getAll">所有商品</el-button>
        <!--添加商品按钮-->
        <el-button type="primary" @click="addDialog">添加商品</el-button>

        <!--商品表格-->
        <template>
            <el-table
                    :data="commodityData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="id" label="商品编号" align="center"></el-table-column>
                <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="description" label="商品描述" align="center"></el-table-column>
                <el-table-column prop="money" label="商品单价(元)" align="center"></el-table-column>
                <el-table-column prop="handle" label="操作" align="center">
                    <template slot-scope = "scope">
                        <el-button type="primary" @click="updateDialog(scope.row)">更新</el-button>
                        <el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--添加商品窗口-->
        <el-dialog :visible.sync="addVisible" title="添加商品" align="center">
            <el-form ref="form" :model="addForm" label-width="80px">
                <el-form-item label="商品编号" required="true">
                    <el-input v-model="addForm.id"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" required="true">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" required="true">
                    <el-input v-model="addForm.money"></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input v-model="addForm.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">立即添加</el-button>
                    <el-button @click="addVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <!--更新商品窗口-->
        <el-dialog :visible.sync="updateVisible" title="更新商品" align="center">
            <el-form ref="form" :model="updateForm" label-width="80px">
                <el-form-item label="商品编号">
                    <el-input v-model="updateForm.id" :disabled="true">1111</el-input>
                </el-form-item>
                <el-form-item label="商品名称" required="true">
                    <el-input v-model="updateForm.name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" required="true">
                    <el-input v-model="updateForm.money"></el-input>
                </el-form-item>
                <el-form-item label="商品描述">
                    <el-input v-model="updateForm.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="update">立即更新</el-button>
                    <el-button @click="updateVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>



    </div>




</body>

    <!--引入vue-->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!--引入组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--引入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    addVisible: false,
                    updateVisible:false,
                    commodityData: [],
                    addForm: {
                        id : '',
                        name : '',
                        money : '',
                        description : ''
                    },
                    updateForm: {
                        name : '',
                        money : '',
                        description : ''
                    },
                    searchById : '',
                    searchByName : ''

                }
            },
            created(){
                this.getAll();
            },
            methods: {
                //查询全部
                getAll(){
                    axios.get("http://localhost/commodities").then((res)=>{
                        if(res.data.code===1051){
                            this.commodityData = res.data.data;
                        }else if(res.data.code===1050){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'error'
                            });
                        }
                    })
                },

                //重置表单数据
                resetAddForm(){
                    this.addForm = {};
                },
                resetUpdateForm(){
                    this.updateForm = {};
                },
                //弹出添加窗口
                addDialog(){
                    this.addVisible = true;
                    this.resetAddForm();//清空表单数据
                },

                //添加商品
                add(){
                    //提交异步请求
                    axios({
                        method: "post",
                        url: 'http://localhost/commodities',
                        data: JSON.stringify(this.addForm),
                        headers:{
                            'Content-Type':'application/json;charset=utf-8'
                        }
                    }).then(res=>{
                        if(res.data.code===1001){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'success'
                            });
                            this.addVisible = false;
                            this.getAll();
                        }else if(res.data.code===1000){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'error'
                            });
                        }
                    })
                },

                //删除一列商品信息
                deleteById(row){
                    //弹出提示框
                    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{

                    }).then(()=>{
                        axios.delete("http://localhost/commodities/"+row.id).then((res)=>{
                            if(res.data.code===1011){
                                this.$message({
                                    message: res.data.msg,
                                    duration: 1000,
                                    type: 'success'
                                });
                                this.getAll();
                            }else if(res.data.code===1010){
                                this.$message({
                                    message: res.data.msg,
                                    duration: 1000,
                                    type: 'error'
                                });
                            }

                        })
                    }).catch(()=>{
                        this.$message.error("取消删除操作！");
                    });
                },

                //弹出更新窗口
                updateDialog(row){
                    this.updateVisible=true;
                    this.resetUpdateForm();
                    this.updateForm.id = row.id;
                },
                //更新一列商品信息
                update(){
                    axios({
                        method: "put",
                        url: 'http://localhost/commodities',
                        data: JSON.stringify(this.updateForm),
                        headers:{
                            'Content-Type':'application/json;charset=utf-8'
                        }
                    }).then(res=>{
                        if(res.data.code===1021){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'success'
                            });
                            this.updateVisible = false;
                            this.getAll();
                        }else if(res.data.code===1020){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'error'
                            });
                        }
                    })
                },

                //根据id查询商品
                getById(){
                    axios.get("http://localhost/commodities/id/"+this.searchById).then((res)=>{
                        if(res.data.code===1031){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'success'
                            });
                            this.commodityData = res.data.data;
                            this.searchById = "";
                        }else if(res.data.code===1030){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'error'
                            });
                        }

                    })
                },
                getByName(){
                    axios.get("http://localhost/commodities/name/"+this.searchByName).then((res)=>{
                        if(res.data.code===1041){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'success'
                            });
                            this.commodityData = res.data.data;
                            this.searchByName = "";
                        }else if(res.data.code===1040){
                            this.$message({
                                message: res.data.msg,
                                duration: 1000,
                                type: 'error'
                            });
                        }
                    })
                },

                /*设置行颜色*/
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex%3 === 0) {
                        return 'row_1';
                    } else if (rowIndex%3 === 1) {
                        return 'row_2';
                    }
                    else if (rowIndex%3 === 2) {
                        return 'row_3';
                    }
                    return '';
                }
            }
        })




    </script>
</html>